<template>
  <div class="project-team" style="height: 100%">

    <search-component :colum="colum" :formValue="queryParas" class="search"
                      @search="search" @reset="reset" ref="search">
    </search-component>
    <vxe-grid
        border
        resizable
        export-config
        import-config
        keep-source
        tableId="data-table"
        ref="xGrid"
        id="toolbar_demo_1"
        :loading="tableLoading"
        :toolbar="tableToolbar"
        :pager-config="pagerConfig"
        :data="tableData"
        @page-change="pageChangeChange">
      <!-- 工具栏按钮插槽 -->
      <template slot="buttons">
        <div style="float: right;margin-right: 12px;">
          <el-button icon="el-icon-circle-plus" size="medium" circle title="新增成员" v-if="btnPermissionUtil.getBtnbtnPermission('team-add')"
                     @click="modalVisible = !modalVisible"></el-button>
          <!--            <vxe-button icon="el-icon-circle-plus" size="medium" circle @click="addVisible = !addVisible"></vxe-button>-->
        </div>
      </template>
      <vxe-table-column field="UserrealName" title="成员"
                        align="center" width="300">
        <template v-slot="{ row }">
          <span>{{row.Userrealname}}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="职称" align="center" width="300">
        <template v-slot="{ row }">
          <span>{{row.Positionsname}}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="部门" align="center" width="300">
        <template v-slot="{ row }">
          <span>{{row.Depatname}}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="角色" align="center" width="300">
        <template v-slot="{ row }">
          <span>{{ getCode(row.Role, 'USER_ROLE') }}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="Created" title="加入时间" align="center">
        <template v-slot="{ row }">
          <span>{{row.Created | formatDateTime}}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" align="center" width="160">
        <template v-slot="{ row }">
          <vxe-button v-if="btnPermissionUtil.getBtnbtnPermission('team-delete')" status="danger" size="mini" @click="del(row)">删除</vxe-button>
        </template>
      </vxe-table-column>
    </vxe-grid>
    <team-member-add :visible.sync="modalVisible" :teamId="$route.params.id" @search="getDataList"></team-member-add>
  </div>
</template>

<script>
import TeamMemberAdd from './TeamMemberAdd';
import { formatDateString } from '@/utils/date';
import projectTeamApi from '@/api/projectTeamApi';
import searchComponent from "@/components/element/layoutComponents/searchFrom/searchComponent.vue";
export default {
  components: {
    TeamMemberAdd,
    searchComponent
  },
  data () {
    return {
      tableData: [],
      modalVisible: false,
      tableLoading: false,
      tableToolbar: {
        refresh: {query: this.getDataList},
        zoom: true,
        custom: true
      },
      pagerConfig: {
        currentPage: 1,
        pageSize: 15,
        total: 0,
        pagerCount: 7,
        pageSizes: [10,15,20,50,100]
      },
      colum: [
        {
          placeholder: '请输入姓名',
          prop: 'keyword',
          size: 'small',
          componentName: 'vxe-input',
          type: 'integer',
          min: 0,
          value: 'keyword',
          clearable: true,
          show: true,
          elcolStyle: {
            'width': '200px'
          }
        }
      ],
      queryParas: {
        p: 1,
        pageoffset: 15,
        id: this.$route.params.id
      }
    }
  },
  created () {
    this.queryParas.id = this.$route.params.id
    this.getDataList();
  },
  activated() {
    this.queryParas.id = this.$route.params.id
    this.getDataList();
  },
  methods: {
    search () {
      this.getDataList()
    },
    reset () {
      this.queryParas = {
        p: 1,
        pageoffset: 15,
        id: this.$route.params.id
      }
    },
    pageChangeChange (pageConfig) {
      this.queryParas.p = pageConfig.currentPage
      this.pagerConfig.currentPage = pageConfig.currentPage
      this.queryParas.pageoffset = pageConfig.pageSize
      this.pagerConfig.pageSize = pageConfig.pageSize
      this.getDataList()
    },
    getDataList () {
      this.tableLoading = true
      projectTeamApi.getPage(this.queryParas).then(res => {
        if (res && res.Teams) {
          const { Teams, Total } = res
          this.tableData = Teams;
          this.pagerConfig.total = Total
        } else {
          this.tableData = []
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    del(row){
      projectTeamApi.deleteTeamUser({ids: [row.Id]}).then(res => {
        this.$XModal.message({message: res.message, status: res.code === 1 ? 'success' : 'error'})
        if (res.code === 1) {
          this.getDataList()
        }
      })
    }
  },
  filters: {
    formatDateTime (val) {
      return formatDateString(val * 1000, 'yyyy-MM-dd hh:mm:ss')
    }
  }
}
</script>

<style lang="scss" scoped>
    .link-name {
      color: #65CEA7;
    }

    .link-name:hover {
      color: #353F4F;
      text-decoration: underline;
    }
</style>
